<!-- 概览界面折线图数据展示 -->
<template>
  <div class="linechart-container">
    <div class="store-history">积分记录概览
      <!-- 记录查询快捷下拉菜单 -->
      <a-dropdown  style="float: right!important;">
      <a class="ant-dropdown-link" @click.prevent>
        本周记录
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="#">本月记录</a>
          </a-menu-item>
          <a-menu-item>
            <a href="#">本年记录</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    </div>  
    <!-- 分数数据总览视图 -->
    <h2 style="color: blue; padding-left: 5px; margin: 0px;">1024.00积分</h2>
     <h3 style="color: azure; padding-left: 5px; margin: 0px;">本周共有34条积分记录 </h3>
    <div ref="chartRef" class="linechart" style="height:100%">
    
    </div>
  </div>
  
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null); // 用于绑定 DOM 元素
let myChart = null; // 用于存储 ECharts 实例

// ECharts 配置项
const option = {
  title: {
    text: ' '
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['学习', '日常', '休闲', '工作', '艺术']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  //x轴
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  //y轴
  yAxis: {
    type: 'value'
  },
  //数据
  series: [
    {
      name: '学习',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '日常',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '休闲',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '工作',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '艺术',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

// 初始化 ECharts 实例
onMounted(() => {
  myChart = echarts.init(chartRef.value);
  myChart.setOption(option);
});

// 销毁 ECharts 实例（避免内存泄漏）
onUnmounted(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped >
.linechart-container {
  display: inline;
  height: 390px;
  width: 100%;
  box-shadow:0,0,30px,0,rgba(0,0,0,0.1);
  border-radius: 16px;
  margin-top: 20px;
  background-color: #72EDA8;
}
.store-history {
  padding-left: 3px;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  margin-left: 5px;
  margin-right:5px ;
  margin-top: 20px;
  background-color: white;
  border-radius: 5%;
}
.linechart{
  height: 70%!important;
  border-radius: 3%;
  margin: 10px 10px 0px 10px;
  background-color: rgb(177, 177, 177);
}
</style>